import React, { Component } from 'react'
import './course.less'
import TopNav from '../top_nav'
import ImageSwiper from './image_swiper'
import CourseMode from './course_mode'
import BottomBar from '../bottom_bar'
import courseApi from '../../api/course'
import bannerApi from '../../api/banner'
class Course extends Component {
  state = {
    swiperList:[],
    courseList: [],
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getList()
    this.getBannerList()
  }
  getBannerList = ()=>{
    bannerApi.list().then(res=>{
      if(res.success){
        this.setState({
          swiperList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  getList = () => {
    courseApi.list().then(res=>{
      if(res.success){
        this.setState({
          courseList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })

  }

  render() {
    const { swiperList, courseList } = this.state
    return (
      <div className="course-container">
        <TopNav style={{ background: '#fff', color: '#666' }} active="/course" />
        <ImageSwiper autoplayTime={3000} swiperList={swiperList} />
        <div style={{ padding: '0 180px' }}>
          {
            courseList.map(item=>{
              return <CourseMode key={item.id} courseList={item.courses} courseTypeId={item.id}>{item.title}</CourseMode>
            })
          }
        </div>
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />
      </div>
    )
  }
}

export default Course